<!--tabbar导航 -->
<template>
	<div class="contact">
		<div class="navbox">
			<div class="nav">
				<img class="navticon" src="@/assets/fun/navt.png" alt="左上标" />
				<img class="navbicon" src="@/assets/fun/navb.png" alt="右下标" />
				<div class="usermsg marginAuto flex">
					<div class="usermsg-headimg curpoin" @click="navtag(0,'/fun/usermsg')">
						<img class="usermsg-headimgav" v-if="userInfo.avatar" :src="apifun.URLimg+userInfo.avatar"
							alt="头像" />
						<img class="usermsg-headimgav" v-if="!userInfo.avatar" src="@/assets/logosvg.png" alt="头像" />
						<span class="usermsg-headimgmsg mainbg"></span>
					</div>
					<div class="usermsg-r">
						<div class="usermsg-name ellipsis01 curpoin" @click="navtag(0,'/fun/usermsg')">
							{{ userInfo.realname || '小豫' }}
						</div>
						<div class="usermsg-zx curpoin" v-if="userInfo.login_status == 0" @click="linefun()">离线</div>
						<div class="usermsg-zx curpoin" v-if="userInfo.login_status == 1" @click="linefun()">在线</div>
						<div class="usermsg-zx curpoin" v-if="userInfo.login_status == 2" @click="linefun()">忙碌</div>
					</div>
				</div>
				<div class="navblock">
					<div class="naveach" @click="navtag(1,'/fun/information')">
						<div class="naveach-l" :class="navindex == 1 ? 'mainbg':''"></div>
						<div class="naveachb curpoin" :class="navindex == 1 ? 'mainbg':''">
							<div class="naveachb-icon">
								<img class="naveachb-iconp" v-if="navindex == 1" src="@/assets/fun/fun1active.png"
									alt="消息" />
								<img class="naveachb-iconp" v-if="navindex != 1" src="@/assets/fun/fun1.png" alt="消息" />
							</div>
							<div class="naveachb-title" :class="navindex == 1 ? 'naveach-activecolor':'mainColor'">消息
							</div>
							<div class="naveachb-num" :class="navindex == 1 ? 'mainColor naveach-activebg':'mainbg'">
								{{ unreadnum }}
							</div>
						</div>
					</div>
					<div class="naveach" @click="navtag(2,'/fun/order')">
						<div class="naveach-l" :class="navindex == 2 ? 'mainbg':''"></div>
						<div class="naveachb curpoin" :class="navindex == 2 ? 'mainbg':''">
							<div class="naveachb-icon">
								<img class="naveachb-iconp" v-if="navindex == 2" src="@/assets/fun/fun2active.png"
									alt="订单" />
								<img class="naveachb-iconp" v-if="navindex != 2" src="@/assets/fun/fun2.png" alt="订单" />
							</div>
							<div class="naveachb-title" :class="navindex == 2 ? 'naveach-activecolor':'mainColor'">订单
							</div>
							<div class="naveachb-num" :class="navindex == 2 ? 'mainColor naveach-activebg':'mainbg'"
								v-if="ordernum > 0">{{ ordernum }}
							</div>
						</div>
					</div>
					<div class="naveach" @click="navtag(3,'/fun/addressBook')">
						<div class="naveach-l" :class="navindex == 3 ? 'mainbg':''"></div>
						<div class="naveachb curpoin" :class="navindex == 3 ? 'mainbg':''">
							<div class="naveachb-icon">
								<img class="naveachb-iconp" v-if="navindex == 3" src="@/assets/fun/fun3active.png"
									alt="通讯录" />
								<img class="naveachb-iconp" v-if="navindex != 3" src="@/assets/fun/fun3.png"
									alt="通讯录" />
							</div>
							<div class="naveachb-title" :class="navindex == 3 ? 'naveach-activecolor':'mainColor'">通讯录
							</div>
							<!-- <div class="naveachb-num mainbg" :class="navindex == 3 ? 'mainColor naveach-activebg':''">1</div> -->
						</div>
					</div>
					<div class="naveach" @click="navtag(4,'/fun/member')"
						v-if="roleId == 2 || roleId == 3 || roleId == 7">
						<div class="naveach-l" :class="navindex == 4 ? 'mainbg':''"></div>
						<div class="naveachb curpoin" :class="navindex == 4 ? 'mainbg':''">
							<div class="naveachb-icon">
								<img class="naveachb-iconp" v-if="navindex == 4" src="@/assets/fun/fun4active.png"
									alt="成员管理" style="width:20px;height:20px;" />
								<img class="naveachb-iconp" v-if="navindex != 4" src="@/assets/fun/fun4.png"
									alt="成员管理" />
							</div>
							<div class="naveachb-title" :class="navindex == 4 ? 'naveach-activecolor':'mainColor'">成员管理
							</div>
							<!-- <div class="naveachb-num mainbg" :class="navindex == 4 ? 'mainColor naveach-activebg':''">1</div> -->
						</div>
					</div>
					<div class="naveach" @click="navtag(5,'/fun/appoint')" v-if="roleId == 2 || roleId == 3">
						<div class="naveach-l" :class="navindex == 5 ? 'mainbg':''"></div>
						<div class="naveachb curpoin" :class="navindex == 5 ? 'mainbg':''">
							<div class="naveachb-icon">
								<img class="naveachb-iconp" v-if="navindex == 5" src="@/assets/fun/fun5active.png"
									alt="指派管理" />
								<img class="naveachb-iconp" v-if="navindex != 5" src="@/assets/fun/fun5.png"
									alt="指派管理" />
							</div>
							<div class="naveachb-title" :class="navindex == 5 ? 'naveach-activecolor':'mainColor'">指派管理
							</div>
							<!-- <div class="naveachb-num mainbg" :class="navindex == 5 ? 'mainColor naveach-activebg':''">1</div> -->
						</div>
					</div>
				</div>
				<div class="navbtm">
					<div class="navbtmimg">
						<img class="navbtmimgp" src="@/assets/logo.png" alt="logo" />
					</div>
					<el-button class="navbtmbtn mainbg" @click="quitlogin()">退出登录</el-button>
					<div style="font-size: 9px;margin-top: 5px;text-align: center;color: #999999;letter-spacing: 1px;">{{ apifun.version }}</div>
				</div>
			</div>
		</div>
		<el-dialog   id="lineblock" title="更改状态" :visible.sync="islineshow" width="400px" top="80px"
			:before-close="closedia" :modal-append-to-body="false">
			<el-select style="width:100%;" v-model="linename" placeholder="请选择" @change="selectlinefun">
				<el-option v-for="(item,index) in linedata" :key="index" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
			<el-input style="margin-top:10px;" v-if="lineid == 2" v-model="reply" placeholder="请输入自动回复语"></el-input>
			<div class="replacebtn">
				<el-button class="replacebtneach" style="background-color:#999999;"
					@click="islineshow=false">取消</el-button>
				<el-button class="replacebtneach mainbg" @click="enterlinefun()">提交</el-button>
			</div>
		</el-dialog>
		<Socket ref="socket"></Socket>
	</div>
</template>

<script>
	import Socket from '@/components/chat/socket';
	import utils from '@/utils/utils';
	export default {
		components: {
			Socket
		},
		data() {
			return {
				// connectNums:0,
				navindex: 1,
				roleId: '',
				userInfo: {},
				contactList: [],
				contacts: [], //  处理后的列表
				unreadnum: 0,
				ordernum: 0,  // 新订单未读
				order_chat_sign:'',
				newmsgdata: {},
				islineshow: false,
				linedata: [{
					id: 0,
					name: '离线'
				}, {
					id: 1,
					name: '在线'
				}, {
					id: 2,
					name: '忙碌'
				}],
				linename: '',
				lineid: '',
				reply: '',
				isshowvoice: false
			}
		},
		mounted() {
			if (localStorage.getItem('token')) {
				let userInfo = JSON.parse(localStorage.getItem('userInfo'));
				this.$store.commit('storeUsermsg', userInfo);
				this.userInfo = userInfo;
				this.reply = userInfo.auto_reply
			};
			this.roleId = this.$store.state.roleId;
			this.getfriend()
		},
		methods: {
			initWebSocket(){ // 断网重连scoket
				this.$refs.socket.initWebSocket();
			},
			linefun() { //  打开操作是否在线状态
				this.islineshow = true;
				this.linename = '';
				this.lineid = ''
			},
			selectlinefun(e) {
				this.lineid = e;
			},
			enterlinefun() {
				let sendData = {
					status: this.lineid,  // 0离线 1在线 2忙碌
					content: this.reply
				}
				if (this.lineid === '') {
					this.$message({
						message: '请选择状态',
						type: 'warning'
					});
					return false
				};
				if (this.lineid == 2) {
					if (this.reply == '') {
						this.$message({
							message: '请输入自动回复语',
							type: 'warning'
						});
						return false
					}
				};
				this.apifun.$post('/pc/user/setUserLoginStatus', sendData).then((res) => {
					if (res.code == 200) {
						this.$store.dispatch('getusermsgfun', this.$store);
						this.islineshow = false;
						this.$message({
							message: '操作成功',
							type: 'success'
						});
					}
				})
			},
			initContacts(data) { // 处理聊天列表数据
				let contacts = utils.sortContacts(data);
				let otherContacts = [];
				contacts.forEach((item, index) => {
					otherContacts.push(item)
				})
				this.contacts = otherContacts;
				this.$store.state.contactList = otherContacts;
			},
			appendContacts(data) { // 别人发的消息
				// const contacts = this.contacts;
				const contacts = this.$store.state.contactList;
				const contact = contacts.filter(item => item.chat_sign == data.chat_sign);
				if (contact.length > 0) {
					this.updateContacts(data);
				} else {
					contacts.push(data);
					this.initContacts(contacts);
				}
			},

			updateContacts(res) { // 更新联系人
				// console.log('更新数据--',res)
				// const contacts = this.contacts;
				const contacts = this.$store.state.contactList;
				contacts.forEach((item, index) => {
					if (item.chat_sign == res.chat_sign) {
						contacts[index] = Object.assign(item, res);
					}
				})
				this.initContacts(contacts);
			},
			getfriend() {
				this.apifun.$post('/pc/im/getContacts', {}).then((res) => {
					if (res.code == 200) {
						let infodataall = res.data;
						let infodata = infodataall.filter(obj => obj.lastContent != '');
						this.$store.state.contactList = infodata;
						this.initContacts(infodata);
					}
				})
			},
			navtag(tag, path) {
				if (tag == this.navindex) return false;
				this.navindex = tag;
				this.$emit('navtagfun', tag);
				if (tag == 2) {
					if(this.ordernum > 0){
						this.apifun.$post('/pc/im/setMsgisRead', {
							chat_sign: this.order_chat_sign
						}).then((res) => {
							if (res.code == 200) {}
						})
						this.ordernum = 0;
					}
				}
			},
			quitlogin() {
				// this.connectNums = 99;
				this.apifun.$post('/pc/User/logout', {}).then((res) => {
					if (res.code == 200) {
						localStorage.removeItem('token');
						localStorage.removeItem('userInfo');
						localStorage.removeItem('client_id');
						this.$store.commit('storeUsermsg', {});
						
						setTimeout(()=>{
							location.href = location.href.split("#")[0];
							// this.$router.push('/login');
						},300)
					}
				})
			},
			closedia() { // 关闭弹窗
				this.islineshow = false
			}
		},
		watch: {
			isshowvoicefun(data) {
				this.isshowvoice = data;
			},
			appendMessagefun(res) { // 新消息 (from_user:发送方信息)
				let data = res.data;
				// 新订单START
				if (data.type == 'new_order') {
					this.ordernum++;
					this.order_chat_sign = data.chat_sign;
				};
				// end
				// 语音开始
				if (res.type == 'webrtc') {
					// 	this.answer = data;
					// if (data.extends.event == 'calling') {
					if (data.type == 'calling') {
						this.$store.state.statustype = 2;
						this.electron.ipcRenderer.send('open-call-window');
						setTimeout(() => {
							this.electron.ipcRenderer.send("statustype", 2);
							this.electron.ipcRenderer.send("appendMessage", res);
						}, 500)
					};
				};
				// 语音结束
				this.newmsgdata = data;

				let contact = null;
				if (data.from_user) {
					let toUser = data.from_user.id || data.from_user.user_id;
					if (toUser == this.userInfo.user_id) { // 自己发的
						contact = data;
					};
					if (contact) { //自己发的；不用加新人；更新数据
						let addcontact = JSON.parse(JSON.stringify(data));
						addcontact.lastContent = data.content;
						addcontact.lastSendTime = data.sendTime;
						addcontact.id = data.toContactId; // 发送方id
						this.updateContacts(addcontact);
					} else { // 不是自己发的
						let newContact = JSON.parse(JSON.stringify(data));
						newContact.lastContent = data.content;
						newContact.sendTime = data.sendTime;
						newContact.avatar = data.from_user.avatar || "";
						newContact.realname = data.from_user.realname;
						// newContact.email = data.from_user.email;
						newContact.is_notice = 1; // 未知
						newContact.is_online = ''; // 未知
						newContact.is_top = 0; // 未知
						newContact.location = '中国';
						this.appendContacts(newContact);
					};
				};
				// 如果在后台运行,不是自己发的，并且开启了通知，就创建通知栏
				// if(data.fromUser.id != this.userInfo.user_id){

				// }
			},
			userInfofun(data) {
				this.userInfo = data;
			},
			allunreadnum(data) {
				this.unreadnum = data;
			},
			contactListfun(data) {
				let allunreadnum = 0,ordernum = 0;
				data.forEach((item) => {
					if(item.type != 'new_order'){  // new_order订单未读
						if (this.chatsign == item.chat_sign) {
							item.unread = 0
						} else {
							if (this.newmsgdata.from_user) {
								if (this.newmsgdata.chat_sign == item.chat_sign) {
									++item.unread
								}
							}
						}
						allunreadnum += item.unread;
					}else{
						ordernum = item.unread;
						this.order_chat_sign = item.chat_sign;
					}
				})
				this.unreadnum = allunreadnum;
				this.ordernum = ordernum;
				this.$store.state.allunreadnum = allunreadnum;
				this.$store.state.orderunreadnum = ordernum;
			}
		},
		computed: {
			isshowvoicefun() {
				return this.$store.state.isshowvoice;
			},
			appendMessagefun() {
				return this.$store.state.appendMessage;
			},
			userInfofun() {
				return this.$store.state.UserInfo;
			},
			allunreadnum() {
				return this.$store.state.allunreadnum;
			},
			contactListfun() {
				let index = 0; //0=所有  1=未读  2 -@我
				let contactList = [];
				if (index == 1) {
					contactList = this.contacts.filter(obj => obj.unread > 0);
				} else if (index == 2) {
					contactList = this.contacts.filter(obj => obj.is_at > 0);
				} else {
					// contactList = this.contacts.filter(obj => obj.lastContent);
					
					contactList = this.contacts.filter((obj) => {
						return obj.lastContent || obj.role_id
					});
				}
				return contactList;
			},
		},
	}
</script>
<style>
	#lineblock .el-dialog__body {
		padding: 0 20px 30px !important;
	}

	#lineblock .el-input__inner {
		border-color: #FF5E03;
		height: 40px;
		line-height: 40px;
	}
</style>
<style scoped lang="scss">
	.navbox {
		display: flex;
		flex-direction: column;
		height: 98vh;
		min-height: 700px;
		margin-left: 15px;
	}

	.nav {
		position: relative;
		width: 150px;
		flex: 1;
		background-color: #FFF6F1;
		border-radius: 10px;
	}

	.navticon {
		position: absolute;
		top: 0;
		left: 0;
	}

	.navbicon {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	// 用户信息
	.usermsg {
		width: 130px;
		padding: 10px 0;

		.usermsg-headimg {
			position: relative;
			width: 40px;
			height: 40px;

			.usermsg-headimgav {
				width: 40px;
				height: 40px;
				border-radius: 10px;
			}

			.usermsg-headimgmsg {
				position: absolute;
				right: -4px;
				bottom: -4px;
				width: 10px;
				height: 10px;
				border: 2px solid #fff;
				border-radius: 50%;
			}
		}

		.usermsg-r {
			.usermsg-name {
				width: 90px;
				color: #333;
				font-size: 14px;
				line-height: 24px;
				text-align: center;
				font-weight: bold;
			}

			.usermsg-zx {
				font-size: 12px;
				color: #FF5E03;
				margin-left: 10px;
				line-height: 20px;
			}
		}
	}

	// 导航
	.naveach-activecolor {
		color: #fff;
	}

	.naveach-activebg {
		background-color: #fff;
	}

	.navblock {
		margin-top: 30px;

		.naveach {
			position: relative;
			display: flex;
			margin-top: 20px;

			.naveach-l {
				width: 5px;
				height: 40px;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			}

			.naveachb {
				position: relative;
				margin-left: 7px;
				width: 100px;
				height: 24px;
				padding: 8px 10px;
				border-radius: 10px;
				display: flex;

				.naveachb-icon {
					width: 24px;
					height: 24px;
					text-align: center;

					.naveachb-iconp {
						width: 24px;
						height: 24px;
					}
				}

				.naveachb-title {
					margin-left: 10px;
					font-size: 14px;
					line-height: 24px;
				}

				.naveachb-num {
					position: absolute;
					right: 10px;
					width: 18px;
					height: 18px;
					line-height: 18px;
					margin-top: 3px;
					text-align: center;
					border-radius: 50%;
					font-size: 14px;
					color: #fff;
				}
			}
		}
	}

	// 底部
	.navbtm {
		position: absolute;
		width: 120px;
		bottom: 20px;
		left: 50%;
		margin-left: -60px;

		.navbtmimg {
			width: 120px;
			height: 35px;
			margin-bottom: 24px;

			.navbtmimgp {
				width: 120px;
				height: 35px;
			}
		}

		.navbtmbtn {
			width: 120px;
			height: 40px;
			color: #fff;
			font-size: 12px
		}
	}

	// 弹窗
	.replacebtn {
		margin-top: 30px;
		display: flex;
		justify-content: flex-end;

		.replacebtneach {
			width: 130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size: 16px;
			margin-left: 25px;
		}
	}
</style>